<{include file="v2/header.html"}>
<main class="pt-24 pb-16">
    <!-- 页面标题 -->
    <section class="container mx-auto px-4 mb-12">
        <div class="flex flex-col md:flex-row md:items-end justify-between">
            <div>
                <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2 scroll-reveal">珍贵古籍藏本</h1>
                <p class="text-lightink max-w-2xl scroll-reveal">汇集历代经典古籍，传承中华文化精髓，让珍贵文献触手可及</p>
            </div>
            
            <!-- 搜索框 -->
            <div class="mt-6 md:mt-0 w-full md:w-auto scroll-reveal">
                <div class="relative">
                    <input type="text" id="search-input" placeholder="搜索古籍名称、作者或内容..." 
                        class="w-full md:w-80 pl-10 pr-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cinnabar/30 focus:border-cinnabar transition-all">
                    <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-lightink"></i>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 古籍分类 -->
    <section class="container mx-auto px-4 mb-12">
        <div class="bg-rice rounded-xl p-4 md:p-6 shadow-sm scroll-reveal">
            <h2 class="text-xl font-song font-bold mb-6">古籍分类</h2>
            <div class="flex flex-wrap gap-3">
                <button class="category-btn bg-cinnabar text-rice px-5 py-2 rounded-full text-sm hover:bg-opacity-90 transition-all" data-category="all">
                    全部典籍
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="经部">
                    经部
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="史部">
                    史部
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="子部">
                    子部
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="集部">
                    集部
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="丛书">
                    丛书
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="方志">
                    方志
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="医书">
                    医书
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="佛经">
                    佛经
                </button>
                <button class="category-btn bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all" data-category="道经">
                    道经
                </button>
            </div>
        </div>
    </section>
    
    <!-- 精选古籍 -->
    <section class="container mx-auto px-4 mb-16">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-song font-bold mb-8 text-center scroll-reveal">精选善本</h2>
        
        <div id="featured-books" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 精选古籍将通过JS动态加载 -->
        </div>
    </section>
    
    <!-- 热门古籍 -->
    <section class="container mx-auto px-4 mb-16">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-song font-bold mb-8 text-center scroll-reveal">热门浏览</h2>
        
        <div id="popular-books" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- 热门古籍将通过JS动态加载 -->
        </div>
    </section>
    
    <!-- 古籍阅读工具 -->
    <section class="container mx-auto px-4 mb-16">
        <div class="bg-ink text-rice rounded-2xl overflow-hidden">
            <div class="grid grid-cols-1 lg:grid-cols-2">
                <div class="p-8 md:p-12 flex flex-col justify-center">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-song font-bold mb-4 scroll-reveal">专业古籍阅读工具</h2>
                    <p class="text-rice/70 mb-8 max-w-lg scroll-reveal">提供高清扫描、原文对照、注释解读、字词查询等功能，让古籍阅读不再困难，助您深入理解经典著作。</p>
                    <div class="flex flex-wrap gap-4 scroll-reveal">
                        <a href="#" class="inline-block bg-cinnabar text-rice px-6 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300">
                            了解更多 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                        <a href="#" class="inline-block border-2 border-rice text-rice px-6 py-3 rounded-full hover:bg-rice hover:text-ink transition-all duration-300">
                            开始使用
                        </a>
                    </div>
                </div>
                <div class="relative h-64 lg:h-auto">
                    <img src="https://picsum.photos/id/175/800/600" alt="古籍阅读工具" class="w-full h-full object-cover">
                </div>
            </div>
        </div>
    </section>
    
    <!-- 更多古籍 -->
    <section class="container mx-auto px-4 mb-16">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-song font-bold mb-8 text-center scroll-reveal">更多古籍</h2>
        
        <div id="more-books" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 更多古籍将通过JS动态加载 -->
        </div>
    </section>
    
    <!-- 加载更多 -->
    <div class="text-center mt-12 scroll-reveal">
        <button id="load-more" class="border-2 border-ink text-ink px-8 py-3 rounded-full hover:bg-ink hover:text-rice transition-all duration-300 font-song">
            加载更多古籍 <i class="fa fa-refresh ml-2"></i>
        </button>
    </div>
</main>
<!-- JavaScript -->
<script>
    // 全局变量
    let currentPage = 1;
    const pageSize = 6;
    let currentCategory = 'all';
    let searchKeyword = '';
    let isLoading = false;
    let hasMoreData = true;
    
    // 页面加载完成后初始化
    $(document).ready(function() {
        // 加载初始数据
        loadFeaturedBooks();
        loadPopularBooks();
        loadMoreBooks();
        
        // 加载更多按钮事件
        $('#load-more').click(function() {
            if (!isLoading && hasMoreData) {
                loadMoreBooks();
            }
        });
        
        // 分类按钮事件
        $('.category-btn').click(function() {
            // 更新按钮样式
            $('.category-btn').removeClass('bg-cinnabar text-rice').addClass('bg-paper text-ink');
            $(this).removeClass('bg-paper text-ink').addClass('bg-cinnabar text-rice');
            
            // 更新当前分类并重新加载
            currentCategory = $(this).data('category');
            currentPage = 1;
            $('#more-books').empty();
            hasMoreData = true;
            loadMoreBooks();
        });
        
        // 搜索功能
        $('#search-input').on('input', function() {
            searchKeyword = $(this).val().trim();
            currentPage = 1;
            $('#more-books').empty();
            hasMoreData = true;
            loadMoreBooks();
        });
    });
    
    // 加载精选古籍
    function loadFeaturedBooks() {
        fetchBooks({ type: 'featured' }, function(data) {
            renderFeaturedBooks(data.data);
        });
    }
    
    // 加载热门古籍
    function loadPopularBooks() {
        fetchBooks({ type: 'popular' }, function(data) {
            renderPopularBooks(data.data);
        });
    }
    
    // 加载更多古籍
    function loadMoreBooks() {
        isLoading = true;
        $('#load-more').html('<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...');
        
        const params = {
            page: currentPage,
            pageSize: pageSize
        };
        
        // 添加分类筛选
        if (currentCategory !== 'all') {
            params.category = currentCategory;
        }
        
        // 添加搜索关键词
        if (searchKeyword) {
            params.keyword = searchKeyword;
        }
        
        fetchBooks(params, function(data) {
            if (data.length > 0) {
                renderMoreBooks(data);
                currentPage++;
            } else {
                hasMoreData = false;
            }
            
            isLoading = false;
            $('#load-more').html('加载更多古籍 <i class="fa fa-refresh ml-2"></i>');
        }, function() {
            isLoading = false;
            $('#load-more').html('加载更多古籍 <i class="fa fa-refresh ml-2"></i>');
            alert('加载失败，请重试');
        });
    }
    
    // 调用API获取书籍数据
    function fetchBooks(params, successCallback, errorCallback) {
        // 构建查询字符串
        const queryParams = new URLSearchParams({
            c: 'main',
            a: 'getBooks',
            ...params
        }).toString();
        
        // 调用API
        fetch(`index.php?${queryParams}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                if (successCallback && typeof successCallback === 'function') {
                    successCallback(data);
                }
            })
            .catch(error => {
                console.error('获取数据失败:', error);
                if (errorCallback && typeof errorCallback === 'function') {
                    errorCallback(error);
                }
            });
    }
    
    // 渲染精选古籍
    function renderFeaturedBooks(books) {
        const container = $('#featured-books');
        container.empty();

        books.forEach(book => {
            const bookHtml = `
                <a href="index.php?c=main&a=gjDetails&id=${book.id}" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-64 overflow-hidden">
                        <img src="${book.pic}" alt="${book.title}" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">${book.niandai}</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">${book.title}</h3>
                        <p class="text-sm text-lightink mb-3">${book.author} · ${book.niandai}</p>
                        <p class="text-ink/80 text-sm mb-4">${book.description}</p>
                        <div class="flex justify-between items-center">
                            <!--<span class="text-xs bg-gray-100 px-2 py-1 rounded-full">${book.edition}</span>-->
                            <span class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                阅读全文 <i class="fa fa-angle-right ml-1"></i>
                            </span>
                        </div>
                    </div>
                </a>
            `;
            container.append(bookHtml);
        });
    }
    
    // 渲染热门古籍
    function renderPopularBooks(books) {
        const container = $('#popular-books');
        container.empty();
        
        books.forEach(book => {
            const bookHtml = `
                <a href="index.php?c=main&a=gjDetails&id=${book.id}" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="${book.pic}" alt="${book.title}" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-song font-bold mb-1">${book.title}</h3>
                        <p class="text-xs text-lightink">${book.author} · ${book.niandai}</p>
                    </div>
                </a>
            `;
            container.append(bookHtml);
        });
    }
    
    // 渲染更多古籍
    function renderMoreBooks(books) {
        const container = $('#more-books');
        
        books.forEach(book => {
            const bookHtml = `
                <a href="index.php?c=main&a=gjDetails&id=${book.id}" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">

                    <div class="relative h-64 overflow-hidden">
                        <img src="${book.pic}" alt="${book.title}" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">${book.niandai}</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">${book.title}</h3>
                        <p class="text-sm text-lightink mb-3">${book.author} · ${book.niandai}</p>
                        <p class="text-ink/80 text-sm mb-4">${book.description}</p>
                        <div class="flex justify-between items-center">
                            <!--<span class="text-xs bg-gray-100 px-2 py-1 rounded-full">${book.edition}</span>-->
                            <span class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                阅读全文 <i class="fa fa-angle-right ml-1"></i>
                            </span>
                        </div>
                    </div>
                </a>
            `;
            container.append(bookHtml);
        });
    }
</script>
<{include file="v2/footer.html"}>